<template>
  <div class="my-info no-head-foot mx-auto">
    <router-link to="/my" class="a"><icon name="el-icon-ArrowLeft" :size="20" /><span class="web">返回</span></router-link>
    <div v-if="userinfo" class="max-w-[400px] mx-auto">
      <div class="title">个人资料</div>
      <div class="tx-box flex items-center">
        <img :src="avatar" alt="" class="tx">
        <span v-if="isWeChat" class="text-primary" @click="show = !show">修改头像</span>
        <el-upload v-else ref="uploadRefs" :action="actionsrc" :show-file-list="false" :on-success="handleSuccess" accept=".jpg,.png,.gif,.jpeg">
          <span class="text-primary">修改头像</span>
        </el-upload>
      </div>
      <el-form ref="formRef" :model="formData" label-width="0" :rules="formRules" class="zb-form w-100">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="formData.nickname" placeholder="请输入你的昵称" size="large"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="请输入你的手机号" size="large"></el-input>
        </el-form-item>
        
        <el-button type="primary" class="submit-btn" @click="submit" size="large" :disabled="!formData.mobile || !formData.nickname">确定</el-button>
        <div v-if="userinfo.mobile && userinfo.openid"><el-button type="warning" class="submit-btn" @click="unbindmobile"><img src="@/assets/images/icon/discontent.png" class="icon" alt="">解除绑定</el-button></div>
      </el-form>
    </div>
    
    <div class="pup" :class="{none: !show}">
      <div class="bg fadeIn" @click="show = !show"></div>
      <dl class="box fadeUp">
        <dd class="item" @click="getAvatar">获取微信昵称和头像</dd>
        <el-upload ref="uploadRefs" :action="actionsrc" :show-file-list="false" :on-success="handleSuccess" accept=".jpg,.png,.gif,.jpeg">
          <dd class="item">上传头像</dd>
        </el-upload>
        
        <div class="item cancel" @click="show = !show">取消</div>
      </dl>
    </div>
  </div>
  
  
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { userinfosApi, uploadApi, upuserinfoApi,unbindmobileApi } from '@/api/app';
import { useUserStore } from '@/stores/user'
import { confirm } from '@/utils/util'
import { redirectToWeChatLogin, isWeChat } from '@/utils/weChat'
import { ElMessage } from 'element-plus';
// import { useRouter } from 'vue-router'
const show = ref(false); // 修改头像弹窗
const actionsrc = uploadApi;
const userStore = useUserStore()
const userinfo = ref();
// 解绑手机号
const unbindmobile = async () => {
  await confirm('解除绑定后，当前微信将不能免登录进入该账号，如需登录请重新绑定手机号？', '警告')
  await unbindmobileApi({});
  ElMessage.success('解绑成功');
  userStore.clearMobile(); // 清除手机号标记
  userStore.logout();
  if(isWeChat){
    redirectToWeChatLogin();
  }
  
}
const getAvatar = () =>{
  localStorage.setItem('wxauth_type', 'snsapi_userinfo');
  redirectToWeChatLogin('snsapi_userinfo')
}
// 获取用户信息
const getInfo = () => {
  userinfosApi().then(res=>{
    userinfo.value = res.userinfo;
    avatar.value = res.userinfo.avatar || '';
    formData.nickname = res.userinfo.nickname || ''
    formData.mobile = res.userinfo.mobile || '';
    userStore.setUser(res.userinfo);  // 存储用户信息
  })
}
getInfo();
const avatar = ref('')
const handleSuccess = (res:any)=>{
  console.log(res)
  if(res.code == 1){
    avatar.value = res.data.url;
    ElMessage.success('图片上传成功');
    show.value = false;
  }else{
    ElMessage.error('图片上传失败')
  }
  
}

const formData = reactive({
  nickname:'',
  mobile: '',
})
const formRules = {
  nickname: [
    { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
  ],
  mobile: [
    { required: true, message: '请输入手机号', trigger: ['change', 'blur'] }
  ],
}
// 上传图片
const formRef = ref();
// 更新用户信息
const submit = async () => {
  await formRef.value?.validate();
  const datas = avatar.value === userinfo.value.avatar ? formData : {...formData, avatar: avatar.value}
  upuserinfoApi(datas).then(()=>{
    ElMessage.success('个人资料更新成功')
  })
}
</script>

<style lang="scss" scoped>
$codeW:120px;
$rad:16px;
.pup{
  position: fixed; left: 0; top: 0; display: flex; align-items: flex-end; justify-content: center; width: 100%;height: 100%; 
  &.none{display: none;}
  .box{width: 100%; background-color: #f5f5f5;}
  .item{display: flex; align-items: center; justify-content: center; min-height: 1rem; font-size: 0.26rem; background-color: #fff; border-top: 1px solid #f5f5f5; color: #555;}
  .cancel{color: #999; margin-top: 0.1rem; padding-bottom: var(--bottomIpx);}
  .bg{background-color: rgba(0,0,0,0.5); position: absolute; width: 100%; left: 0; top: 0; height: 100%;}
}
.my-info{
  padding: 20px 0 20px; background-color: #fff; border-radius: 16px; max-width:600px;
  .a{display:flex; align-items: center;}
  .tx-box{
    position: relative; margin: 0 auto 20px;
    width: 100px; height:100px; border-radius: 50%; overflow: hidden;
    .tx{width: 100%; height: 100%; object-fit: cover;}
    .text-primary{position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; color: #fff; background-color: rgba(0,0,0,0.5); font-size: 12px; padding: 6px 0; line-height: 1;}
  }
  .title{margin: 60px 0 30px; font-size:24px; color: #000; font-weight:bold; display: flex; align-items: center; justify-content: center; line-height: 1;}
  :deep(.el-form-item){
    display: block;
    .el-input{height: auto !important; width: 100%;}
    .el-form-item__label{width: 100% !important; text-align: left; display: block; font-size: 16px;}
    .el-input__inner,.el-textarea{min-height: 52px;}
    .el-input__wrapper,.el-textarea__inner{border-radius: $rad; background-color: #F7F7F7; box-shadow: none; font-size: 16px;}
    .el-textarea__inner{padding: 10px 15px;}
  }
  .submit-btn{
    width:100%; height: 50px; border-radius: $rad; font-size: 16px; margin-top: 30px;
    .icon{width: 20px; margin-right: 6px;}
  }
}
@media only screen and (max-width: 769px){
  :deep(.el-upload){
    display: block;
    *{width: 100%;}
  }
  .my-info{
    width:100%;border-radius:0px; padding: 0.3rem 0;
    .a{
      display:flex; align-items: center; width: 0.6rem; height: 0.6rem; padding-left: calc(var(--wap-pad) - 0.1rem);
      &:deep(.el-icon){
        font-size: 0.36rem !important;
      }
      .web{display: none;}
    }
    .title{font-size:0.34rem; margin:-0.6rem auto 0.2rem; height: 0.6rem;}
    .submit-btn{
      margin: 0.2rem 0 0.5rem; height: 1rem; border-radius: 0.32rem; font-size: 0.32rem;
      .icon{width: 0.35rem;}
    }
    .form-tips{line-height: 1;}
    .tx-box{margin-top: 0.6rem;}
    .zb-form{
      padding: 0 0.34rem;
    }
    :deep(.el-form-item){
      display: block;
      .el-input{height: auto !important; width: 100%;}
      .el-form-item__label{width: 100% !important; text-align: left; display: block; font-size: 0.32rem;}
      .el-input__inner,.el-textarea{min-height: 1rem;}
      .el-input__wrapper,.el-textarea__inner{border-radius: 0.32rem; background-color: #F7F7F7; box-shadow: none; font-size: 0.32rem;}
      .el-textarea__inner{padding: 10px 15px;}
    }
  }
}
</style>